<template>
  <Modal
    v-model="config"
    class="modal-tips"
    :mask-closable="false"
    footer-hide
    draggable
    :sticky="true"
    :title="title"
    @on-cancel="cancel"
  >
    <div class="modal-main" style="position: relative">
      <Spin v-if="loading" :with-icon="true"></Spin>
      <div class="flx-row-s-c item-line">
        <div class="title-name">手机号码</div>
        <Input
          :value="$store.state.user.mobile"
          type="tel"
          placeholder="请输入"
          maxlength="30"
          disabled
          style="width: 225px"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">验证码</div>
        <Input
          v-model.trim="oldCode"
          type="text"
          placeholder="请输入"
          maxlength="6"
          style="width: 100px; margin-right: 10px"
        />
        <div
          class="user-normal-button small-code-button"
          :class="[getCodeAvailable ? 'user-normal-button' : 'forbid-button']"
          @click="getCode"
        >
          {{ getCodeContent }}
        </div>
      </div>
      <div class="flx-row-c-c" style="margin-top: 30px">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="nextStep"
        >
          确认
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { sendCode } from "@/api/user";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "修改手机号",
    },
  },
  data() {
    return {
      loading: false,
      // 表单数据
      oldCode: "",
      verifyCode: null,
      // 获取验证码数据
      // 是否可以获取验证码
      getCodeAvailable: true,
      // 获取验证码按钮上的文字
      getCodeContent: "获取验证码",
      // 获取验证码定时器
      getCodeInterval: null,
    };
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  methods: {
    // 提交表单
    async getCode() {
      this.loading = true;
      const res = await sendCode();
      if (res.code === 200) {
        // this.code = res.data.vcode;
        this.getCodeAvailable = false;
        let i = 60;
        this.getCodeContent = `${i--}秒后再获取`;
        this.getCodeInterval = setInterval(() => {
          if (i <= 1) {
            this.getCodeContent = "获取验证码";
            this.getCodeAvailable = true;
            clearInterval(this.getCodeInterval);
            return;
          }
          this.getCodeContent = `${i--}秒后再获取`;
        }, 1000);
        this.$Message.success("验证码已经发送，请注意查收！");
      }
      this.loading = false;
    },
    // 下一步
    nextStep() {
      // if (this.oldCode == null || this.oldCode.length < 6) {
      //   this.$Message.warning('请输入正确的手机验证码！');
      //   return;
      // }
      // this.loading = true;
      // const data = {
      //   code: this.oldCode
      // };
      // const res = await this.$API.user.checkCode(data);
      // if (res.code === 200) {
      //   this.getCodeAvailable = true;
      //   this.getCodeContent = '获取验证码';
      //   clearInterval(this.getCodeInterval);
      //   this.getCodeInterval = null;
      //   this.verifyCode = res.data.verifyCode;
      this.$emit("confirm", this.oldCode);
      // }
      // this.loading = false;
    },
    cancel() {
      this.config = false;
      this.current = 0;
      this.oldCode = "";
      this.verifyCode = null;
      this.getCodeAvailable = true;
      this.getCodeContent = "获取验证码";
      if (this.getCodeInterval != null) {
        clearInterval(this.getCodeInterval);
      }
      this.getCodeInterval = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;

  .item-line {
    margin-bottom: 10px;
  }
  .title-name {
    text-align: right;
    width: 120px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 32px;
    color: #3d3d3d;
    &::after {
      content: ":";
    }
  }
}
</style>
